import {useEffect} from 'react';
import {useAccess, useModel, history} from '@umijs/max';
import {connect} from "dva";
import {Button, Form, Input, Space, Row, Col, Card, Tabs} from 'antd';

const layout = {
    labelCol: {span: 8},
    wrapperCol: {span: 16},
};
const tailLayout = {
    wrapperCol: {offset: 8, span: 16},
};
const Info: React.FC = (props: any) => {
    const { dispatch } = props;
    const {userInfo = {}}: any = useModel('global');
    const access = useAccess();
    const [form1] = Form.useForm();
    const [form2] = Form.useForm();
    // console.log('useAccess', access);
    useEffect(() => {
        form1.setFieldsValue({
            userName: userInfo.userName,
            phone: userInfo.phone,
            nickName: userInfo.nickName,
            userId: userInfo.id
        })
    }, [])
    const onFinish = (values: any) => {
        console.log(values);
        dispatch({
            type: 'user/upData',
            payload: {
                ...values
            }
        })
    };

    const onReset = () => {
        form1.resetFields();
        history.back()
    };
    const items = [
        {
            key: '1',
            label: '基本资料',
            children: <Form
                {...layout}
                form={form1}
                name="control-hooks"
                onFinish={onFinish}
                style={{maxWidth: 600}}
            >
                <Form.Item name="userId" label="用户名" rules={[{required: true}]} style={{display: 'none'}} />
                <Form.Item name="userName" label="用户名" rules={[{required: true}]}>
                    <Input disabled/>
                </Form.Item>
                {/*<Form.Item name="phone" label="手机号" rules={[{ required: true }]}>*/}
                {/*  <Input />*/}
                {/*</Form.Item>*/}
                <Form.Item name="nickName" label="昵称" rules={[{required: true}]}>
                    <Input/>
                </Form.Item>
                <Form.Item {...tailLayout}>
                    <Space>
                        <Button type="primary" htmlType="submit">
                            提交
                        </Button>
                        <Button htmlType="button" onClick={onReset}>
                            取消
                        </Button>
                    </Space>
                </Form.Item>
            </Form>,
        },
        {
            key: '2',
            label: '修改密码',
            children: <Form
                {...layout}
                form={form2}
                name="control-hooks"
                onFinish={onFinish}
                style={{maxWidth: 600}}
            >
                <Form.Item name="oldPassword" label="原密码" rules={[{required: true}]}>
                    <Input type='password'/>
                </Form.Item>
                <Form.Item name="password" label="新密码" rules={[{required: true}]}>
                    <Input type='password'/>
                </Form.Item>
                <Form.Item name="confirmPassword" label="确认密码" rules={[{required: true}]}>
                    <Input type='password'/>
                </Form.Item>
                <Form.Item {...tailLayout}>
                    <Space>
                        <Button type="primary" htmlType="submit">
                            提交
                        </Button>
                        <Button htmlType="button" onClick={onReset}>
                            取消
                        </Button>
                    </Space>
                </Form.Item>
            </Form>,
        }
    ]
    const onChange = (key: string) => {
        console.log(key);
    };
    return (
        <Row gutter={8}>
            <Col span={24}>
                <Card title="个人信息" bordered={false}>
                    <Tabs defaultActiveKey="1" items={items} onChange={onChange}/>
                </Card>
            </Col>
        </Row>
    );
};

export default connect(({user}: any) => {return {...user}})(Info)
// export default Info;
